 /*
 * @description: 会话列表侧边栏
 * @Author: along
 * @Date: 2020-09-23
 * @Last Modified by: along
 * @Last Modified time: 2020-10-15
 */
<template>
    <div class="wrap" id="customLeft">
        <!-- 搜索聊天记录 -->
        <div class="search">
            <el-input
                placeholder="搜索最近聊天记录"
                :prefix-icon="!formData.chat_keyword ? 'el-icon-search' : ''"
                :suffix-icon="formData.chat_keyword ? 'el-icon-close' : ''"
                v-model="formData.chat_keyword"
                size="medium"
                @keyup.native.enter="fnSearchKeyword(formData.chat_keyword)"
                class="wrap-search"
            />
            <div v-if="formData.chat_keyword" class="search-close" @click="fnClearSearch()" />
        </div>

        <!-- 会话列表 -->
        <div class="tab">
            <p
                v-for="(el, index) in ['会话', '最近', '星标', '留言']"
                :key="index"
                :class="formData.currentTab == index ? 'tab-title tab-active' : 'tab-title'"
                @click="fnCurrentTab(index)"
            >
                {{ el }}
            </p>
            <p
                class="tab-line"
                :style="{
                    left: ['32px', '122px', '212px', '301px'][formData.currentTab],
                    width: '28px'
                }"
            />
            <!-- 会话数量 -->
            <p
                class="tab_no_remid"
                v-if="unreadMessage"
                :class="unreadMessage < 10 ? 'current-num' : (unreadMessage > 99 ? 'current-num2' : 'current-num3')"
            >
                {{ unreadMessage | filterMessage }}
            </p>
            <!-- 留言数量 -->
            <p
                class="tab_no_remid"
                v-if="leaveMessage"
                :class="leaveMessage < 10 ? 'current-num' : (leaveMessage > 99 ? 'current-num2' : 'current-num3')"
                :style="{left: '330px'}"
            >
                {{ leaveMessage | filterMessage }}
            </p>
        </div>

        <!-- 最近聊天记录数量 -->
        <div class="chat_record_length" v-if="formData.is_search && formData.currentTab == 1 && formData.sessionLength > 0">最近聊天记录：{{ formData.sessionLength }}条</div>

        <!-- 接待人数 -->
        <div class="reception" v-if="formData.currentTab == 0">
            <div class="reception-wrap">
                <p class="reception-wrap-text">正在接待  {{ session_stat.current_session_count }}/{{ session_stat.max_session_count }}</p>
                <el-popover
                    placement="bottom"
                    width="224"
                    trigger="hover"
                    content="显示当前可接待人数和最大接待人数，接待达到最大人数，系统将不会匹配客户"
                    popper-class="reception-poper"
                >
                    <p slot="reference">
                        <i class="zsdxfont zsdxtishiwenhao"></i>
                    </p>
                </el-popover>
            </div>
            <p class="reception-line-up">当前总排队数  {{ session_stat.queue_session_count }}</p>
        </div>

        <!-- 会话操作 -->
        <div class="conversation" v-if="formData.currentTab == 0" @click.stop="stop">
            <template v-if="!isSelectSessionAll">
                <div class="conver_left">
                    <i class="zsdxfont zsdxxiangxia" />
                    <p class="conver_number">会话中({{ session_stat.current_session_count }})</p>
                </div>
                <div class="conver_right">
                    <i class="zsdxpaixu zsdxfont" @click="showSortDialog = true" />
                    <i class="zsdxpiliang zsdxfont" @click="isSelectSessionAll = true" />
                </div>
            </template>
            <template v-if="isSelectSessionAll">
                <div class="conver_left">
                    <i class="zsdxfont zsdxfanhui" @click="isSelectSessionAll = false"/>
                    <p class="conver_all">全部会话</p>
                </div>
                <p class="conver_cancel" @click="isSelectSessionAll = false">取消批量操作</p>
            </template>
        </div>

        <!-- 接待通知 -->
        <div v-if="JSON.stringify(session_stat) !== '{}'">
            <div
                class="notice" v-if="(session_stat.current_session_count >= session_stat.max_session_count) && formData.currentTab == 0 && (session_stat.queue_session_count > 0)"
                @click="fnReception()"
                :style="{background: formData.is_reception ? '#20A0FF' : '#E3E6E9', color: formData.is_reception ? '#fff' : 'rgba(0,0,0,.6)'}"
            >
                当前接待已饱和,点击可继续接待 {{ !formData.is_reception ? '( ' + formData.count_down + 's )' : '' }}
            </div>
        </div>

        <!-- 消息列表 -->
        <div class="message">
            <div class="message-box" :style="{transform: `translateX(-${formData.currentTab * 360}px)`}">
                <!-- 当前会话列表 -->
                <div class="current">
                    <template v-if="dataList.length">
                        <div
                            v-for="(option,i) in dataList"
                            :key="i"
                            class="current-list"
                            :style="{background: isOrderMessage ? (messageType ? (messageType == 'order' && i === 0 ? 'rgba(240, 242, 247, 1)' : messageType == 'shop' ? (session_no == option.session_no ? '#F0F2F7' : (i === 0 ? '#FFFDF8' : '')) : '') : (i === 0 ? 'rgba(255, 253, 248, 1)' : '')) : ''}"
                            @mouseenter="showQuit(option, true)"
                            @mouseleave="showQuit(option, false)"
                            @click="startSession(option)"
                        >
                            <!-- 订单消息类型 -->
                            <template v-if="option.chat_type == 'order' && isOrderMessage">
                                <p
                                    v-if="session_stat.order_session_count"
                                    :class=" session_stat.order_session_count < 10 ? 'current-num' : (session_stat.order_session_count > 99 ? 'current-num2' : 'current-num3') "
                                >{{ session_stat.order_session_count | filterNum }}</p>
                                <img src="@/assets/image/custom_order.png" class="current-list-image">
                                <div class="current-user">
                                    <p class="current-user-name">订单消息</p>
                                    <div class="current-content">
                                        <p class="current-message">新订单消息</p>
                                        <!-- <p class="current-date">{{ option.msg_time | timeFilter }}</p> -->
                                    </div>
                                </div>
                            </template>

                            <!-- 普通会话消息类型 -->
                            <template v-else>
                                <div class="current_items" v-if="isSelectSessionAll" @click.stop="handleChangeSession($event, option)">
                                    <i class="zsdxfont zsdxcheck_def" v-if="!option.is_change"></i>
                                    <i class="zsdxfont zsdxcheck_sel" v-if="!!option.is_change"></i>
                                </div>
                                <p class="current-quit" v-if="!!option.flag" @click="fnQuitChat(option)">
                                    <i class="zsdxfont zsdxshanchuchacha" />
                                </p>
                                <p
                                    v-if="option.msg_unread_num"
                                    :class=" option.msg_unread_num < 10 ? 'current-num' : (option.msg_unread_num > 99 ? 'current-num2' : 'current-num3') "
                                >{{ option.msg_unread_num | filterNum }}</p>
                                <img :src="option.user_info['head_img']" class="current-list-image">
                                <div class="current-user">
                                    <p class="current-user-name">{{ option.user_info.true_name }}</p>
                                    <div class="current-content">
                                        <p class="current-message">{{ option | filterType }}</p>
                                        <p class="current-date">{{ option.msg_time | timeFilter }}</p>
                                    </div>
                                </div>
                                <i class="zsdxfont zsdx5jiaoxing" v-if="option.star_status === 0 && !isSelectSessionAll" @click.stop="handleChangeMarker(option)"></i>
                                <i class="zsdxfont zsdx5jiaoxing" :style="{color: 'rgba(242,167,62,1)', display: 'block'}" v-if="option.star_status === 1 && !isSelectSessionAll" @click.stop="handleChangeMarker(option)"></i>
                            </template>
                        </div>
                    </template>
                    <template v-else>
                        <p class="__none_data">
                            暂无数据
                        </p>
                    </template>
                </div>

                <!-- 最近会话列表 -->
                <div class="lately">
                    <template v-if="latelyList.length">
                        <div
                            v-for="(option,i) in latelyList"
                            :key="i"
                            class="current-list"
                            @click="startSession(option, 'target')"
                            :style="{background: session_no == option.session_no ? '#F0F2F7' : ''}"
                        >
                            <img :src="option.user_info['head_img']" class="current-list-image">
                            <div class="current-user">
                                <p class="current-user-name">{{ option.user_info.true_name }}</p>
                                <div class="current-content">
                                    <p class="current-message">{{ option | filterType }}</p>
                                    <p class="current-date">{{ option.msg_time | timeFilter }}</p>
                                </div>
                            </div>
                            <p class="tab_no_remid" :class=" option.msg_unread_num < 10 ? 'current-num' : (option.msg_unread_num > 99 ? 'current-num2' : 'current-num3') " v-if="option.msg_unread_num" >{{ option.msg_unread_num | filterMessage }}</p>
                            <i class="zsdxfont zsdx5jiaoxing" v-if="option.star_status === 0" @click.stop="handleChangeMarker(option)"></i>
                            <i class="zsdxfont zsdx5jiaoxing" :style="{color: 'rgba(242,167,62,1)', display: 'block'}" v-if="option.star_status === 1" @click.stop="handleChangeMarker(option)"></i>
                        </div>
                    </template>
                    <template v-else>
                        <p class="__none_data">
                            暂无数据
                        </p>
                    </template>
                </div>

                <!-- 星标列表 -->
                <div class="marker">
                    <template v-if="markList.length">
                        <div
                            v-for="(option,i) in markList"
                            :key="i"
                            class="current-list"
                            @click="startSession(option, 'target')"
                            :style="{background: session_no == option.session_no ? '#F0F2F7' : ''}"
                        >
                            <img :src="option.user_info['head_img']" class="current-list-image">
                            <div class="current-user">
                                <p class="current-user-name">{{ option.user_info.true_name }}</p>
                                <div class="current-content">
                                    <p class="current-message">{{ option | filterType }}</p>
                                    <p class="current-date">{{ option.msg_time | timeFilter }}</p>
                                </div>
                            </div>
                            <p class="tab_no_remid" :class=" option.msg_unread_num < 10 ? 'current-num' : (option.msg_unread_num > 99 ? 'current-num2' : 'current-num3') " v-if="option.msg_unread_num" >{{ option.msg_unread_num | filterMessage }}</p>
                            <i class="zsdxfont zsdx5jiaoxing" v-if="option.star_status === 0" @click.stop="handleChangeMarker(option)"></i>
                            <i class="zsdxfont zsdx5jiaoxing" :style="{color: 'rgba(242,167,62,1)', display: 'block'}" v-if="option.star_status === 1" @click.stop="handleChangeMarker(option)"></i>
                        </div>
                    </template>
                    <template v-else>
                        <p class="__none_data">
                            暂无数据
                        </p>
                    </template>
                </div>

                <!-- 留言列表 -->
                <div class="marker">
                    <template v-if="leavList.length">
                        <div
                            v-for="(option,i) in leavList"
                            :key="i"
                            class="current-list"
                            @click="startSession(option, 'target')"
                            :style="{background: session_no == option.session_no ? '#F0F2F7' : ''}"
                        >
                            <img :src="option.user_info['head_img']" class="current-list-image">
                            <div class="current-user">
                                <p class="current-user-name">{{ option.user_info.true_name }}</p>
                                <div class="current-content">
                                    <p class="current-message">{{ option | filterType }}</p>
                                    <p class="current-date">{{ option.msg_time | timeFilter }}</p>
                                </div>
                            </div>
                            <p class="tab_no_remid" :class=" option.msg_unread_num < 10 ? 'current-num' : (option.msg_unread_num > 99 ? 'current-num2' : 'current-num3') " v-if="option.msg_unread_num" >{{ option.msg_unread_num | filterMessage }}</p>
                            <i class="zsdxfont zsdx5jiaoxing" v-if="option.star_status === 0" @click.stop="handleChangeMarker(option)"></i>
                            <i class="zsdxfont zsdx5jiaoxing" :style="{color: 'rgba(242,167,62,1)', display: 'block'}" v-if="option.star_status === 1" @click.stop="handleChangeMarker(option)"></i>
                        </div>
                    </template>
                    <template v-if="!leavList.length">
                        <p class="__none_data">
                            暂无数据
                        </p>
                    </template>
                </div>
            </div>
        </div>

        <!-- 全选操作 -->
        <div
            v-if="isSelectSessionAll"
            class="selectAll"
        >
            <div class="__select_left">
                <i class="zsdxfont zsdxcheck_def" v-if="!isSelectAll" @click="handleSelect()"></i>
                <i class="zsdxfont zsdxcheck_sel" v-if="isSelectAll" @click="handleSelect()"></i>
                <p class="__select_text">全选</p>
                <p class="__select_content">(已选<span>{{ selectLength }}个</span>)</p>
            </div>
            <p class="__select_button" @click="handleBatchQuit()">
                批量退出接待
            </p>
        </div>

        <!-- 待转接信息 -->
        <div
            v-if="session_stat.transfer_session_count && !isSelectSessionAll"
            class="wait"
            @click="openTransfer()"
        >
            待转接信息
            <p
                v-if="session_stat.transfer_session_count >= 0"
                class="wait-length"
            >
                {{ session_stat.transfer_session_count }}
            </p>
        </div>

        <!-- 待转接信息列表 -->
        <el-dialog
            title="待转接信息"
            :visible.sync="dialogVisible"
            width="752px"
            class="transfer"
        >
            <div>
                <el-table
                    :data="transList"
                    style="width: 100%;"
                    height="100%"
                    :show-header="false"
                    border
                >
                    <el-table-column
                        type="index"
                        width="80"
                        label="序号"
                        align="center"
                    />
                    <el-table-column
                        prop=""
                        label="信息"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    >
                        <template slot-scope="scope">
                            <div class="info">
                                <img :src="scope.row.user_info['head_img']" class="head_img">
                                <div class="info-wrap">
                                    <p class="info-name">{{ scope.row.user_info.true_name }}</p>
                                    <p class="info-kf">发起转接: {{ scope.row.kf_info.type | filterKf }}{{ scope.row.kf_info.nickname }}</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="操作"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    >
                        <template slot-scope="scope">
                            <div class="button">
                                <p @click="checkReson(scope.row)" class="button-reson">转接原因</p>
                                <p @click="rejectTransfer(scope.row)" class="button-reson">拒绝接入</p>
                                <p @click="acceptTransfer(scope.row)" class="button-agreen">同意接入</p>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-wrapper clearfix">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page.sync="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="getTableData"
                    />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    @click="rejectTransferAll()"
                    size="small"
                    :style="{width: '120px', height: '36px', marginRight: '32px'}"
                >全部拒绝</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="acceptTransferAll()"
                    :style="{width: '120px', height: '36px'}"
                >全部接入</el-button>
            </span>
        </el-dialog>

        <!-- 转接原因 -->
        <el-dialog
            title="转接原因"
            :visible.sync="dialogVisibleReson"
            width="640px"
            class="transfer"
        >
            <div class="reson">
                {{ transferReson }}
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    size="small"
                    @click="dialogVisibleReson = false"
                    :style="{width: '120px', height: '36px'}"
                >知道了</el-button>
            </span>
        </el-dialog>

        <!-- 排序 -->
        <div class="sortList" v-if="showSortDialog">
            <div
                v-for="(el,index) in ['消息由近到远排序', '等待时间由长到短']"
                :key="index"
                class="sort_items"
                @click="handleSortData(index)"
            >
                <p class="sort_title">{{ el }}</p>
                <img
                    v-if="sortIndex == index"
                    src="@/assets/image/sort_logo.png"
                    class="sort_logo"
                >
            </div>
        </div>
    </div>
</template>

<script>
import { friendlyDate } from '@/assets/js/utils.js';
import { mapState } from 'vuex';

const parameter = {
    chat_keyword: '',//聊天记录
    currentTab: 0,//默认tab
    is_search: false,//搜索状态
    // now_reception: 101,//当前接待人数
    // count_reception: 100,//最大接待人数
    // line_up: 10,//排队人数
    is_reception: true,//接待状态,是否可继续接待
    count_down: 5,//接待倒计时
    countDownTime: null,//接待
    sessionLength: 0,//搜索记录数量
};

export default {
    name: 'CustomList',
    data () {
        return {
            formData: {
                ...parameter
            },
            dataList: [],//会话列表数据
            latelyList: [],//最近列表数据
            markList: [],//星标列表数据
            leavList: [],//留言列表
            dialogVisible: false,//转接信息弹窗
            transList: [],//转接列表
            page: {//转接列表分页
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            //转接原因
            dialogVisibleReson: false,
            transferReson: '',
            unreadMessage: 0,
            messageType: '',//shop 会话消息 order:订单消息
            isOrderMessage: false,//是否显示订单消息
            pageRecen: { //最近列表分页
                now_page: 1,
                total_count: 0,
                page_size: 0,
                next_page: 1
            },
            leaveMessage: 0,//留言数量
            // 排序 全选
            sortIndex: 0, // 0:消息由近到远 1:等待时间由长到短
            showSortDialog: false,//是否展示排序弹窗
            isSelectSessionAll: false,//是否批量操作
            isSelectAll: false,//是否全选
            leaverTemp: null
        };
    },
    computed: {
        ...mapState({
            session_no: state => state.global.session_no,
            session_stat: state => state.global.session_stat,
            msgReadUpdate: state => state.global.msgReadUpdate,
            msgList: state => state.global.msgList,
            authList: state => state.global.authList,
            socketObj: state => state.connect.socket,
            orderList: state => state.global.orderList,
            order_change: state => state.global.order_change,
            userInfo: state => state.global.userInfo,
            sessionResult: state => state.global.sessionResult
        }),
        //选择会话数量
        selectLength () {
            if(!this.dataList.length) return 0;
            let length = this.dataList.reduce((cur,next) => {
                if(!!next.is_change) {
                    cur.push(next.is_change);
                }
                return cur;
            }, []).length;

            return length;
        }
    },
    watch: {
        formData: {
            handler: function (val, oldVal) {
                if(val.chat_keyword == '') {
                    this.formData.is_search = false;
                }
            },
            deep: true
        },
        msgReadUpdate (val) {
            this.upDateSession(val.split('&')[0]);
        },
        session_stat: {
            handler: function (val, oldVal) {
                this.getSessionList();
                this.getLatelyList();
                this.getMarkList();
                this.getLeavList();
            },
            deep: true
        },
        // 更新订单
        order_change () {
            this.getSessionStat();
        },
        // 订单数据处理
        isSelectSessionAll () {
            if(this.isSelectSessionAll) {
                this.dataList = this.dataList.reduce((cur,next) => {
                    if(next.chat_type !== 'order') {
                        cur.push(next);
                    }
                    return cur;
                }, []);
            } else {
                this.addDataList();
            }
        },
        // 更新留言
        'formData.currentTab' (val) {
            if(val === 2) {
                this.getMarkList();
            }
            if(val === 3) {
                this.getLeavList();
            }
        }
    },
    filters: {
        filterType (val) {
            if(val.latest_msg.msg_type == 'text') return JSON.parse(val.latest_msg.msg_content).text;
            if(val.latest_msg.msg_type == 'image') return '[图片]';
            if(val.latest_msg.msg_type == 'emoji') return '[表情]';
            if(val.latest_msg.msg_type == 'goods') return '[商品]]';
            if(val.latest_msg.msg_type == 'order') return '[订单]';
            if(val.latest_msg.msg_type == 'video') return '[视频]';
            if(val.latest_msg.msg_type == 'goods_self' || val.latest_msg.msg_type == 'goods_free' || val.latest_msg.msg_type == 'goods_discount'|| val.latest_msg.msg_type == 'goods_bargain' || val.latest_msg.msg_type == 'goods_flash_sale' || val.latest_msg.msg_type == 'goods_lottery') return '[商品]';
        },
        timeFilter (val){
            if(val == 0) return '';
            if(Math.abs(new Date().getTime() - val * 1000) < 60 * 1000) return '刚刚';
            return friendlyDate(val*1000, 'hour');
        },
        filterNum (val) {
            if(val <= 99) return val;
            return '99+';
        },
        filterKf (val) {
            if(val == 1) return '掌大客服';
            if(val == 2) return '商家客服';
            if(val == 3) return '学生客服';
        },
        filterMessage (val) {
            if(val < 100) return val;
            if(val >= 100) return '99+';
        }
    },
    destroyed () {
        clearTimeout(this.leaverTemp);

    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 页面数据初始化
         */
        init () {
            this.getSessionList();
            this.getLatelyList(1);
            this.getSessionStat();
            this.getMarkList();
            this.getLeavList();

            // 自动刷新留言
            clearTimeout(this.leaverTemp);
            this.computedLeavList();

            let addEvent = (function(){
                if(window.addEventListener){
                    return function(elm, type, handle){
                        elm.addEventListener(type, handle, false);
                    };
                }
                if(window.attachEvent){
                    return function(elm, type, handle){
                        elm.attachEvent('on' + type, handle);
                    };
                }
            })();

            // 上拉加载处理
            let lately = document.querySelector('.lately');
            addEvent(lately,'scroll', () => {
                if(this.pageRecen.next_page === 0) return false;
                let scrollHeight = lately.scrollHeight;
                let scrollTop = lately.scrollTop;
                let height = lately.offsetHeight;
                if((scrollTop + height) == scrollHeight) {

                    function addData (self) {
                        console.log('到底了', self.pageRecen.next_page);

                        let list = [];

                        self.$post('/Session/getRecentSessionList', {
                            keyword: self.formData.chat_keyword,
                            page_id: self.pageRecen.now_page + 1
                        }, resp => {
                            if(resp.code == 1) {
                                self.pageRecen = {
                                    ...resp.data.page
                                };
                                list = resp.data.list;

                                if(resp.data.list.length) {
                                    self.latelyList = self.latelyList.concat(resp.data.list);

                                    self.$store.commit('global/SET_SESSION_LATELY_LIST', self.latelyList);
                                    self.$set(self.formData, 'sessionLength', self.latelyList.length);

                                    if(!self.latelyList.length) return false;
                                    self.unreadMessage = self.latelyList.reduce((totle,cur,index,arr)=>{
                                        return Number(totle) + Number(cur.msg_unread_num);
                                    },[]);
                                }

                                if(!resp.data.list.length && resp.data.page.next_page !== 0) {
                                    addData(self);
                                    return false;
                                }

                            } else {
                                self.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });

                        return list;
                    }

                    addData(this);

                }
            });

            // 监听点击事件
            document.getElementById('app').addEventListener('click', e => {
                e.stopPropagation();
                if(!this.showSortDialog) return false;

                setTimeout(() => {
                    this.showSortDialog = false;

                }, 100);
            }, false);
        },

        /**
         * @description 获取当前会话列表
         */
        getSessionList () {
            this.$post('/Session/getSessionList', {}, resp => {
                if(resp.code == 1) {
                    const dataList = this.sortList(resp.data.list, this.sortIndex);

                    this.$store.commit('global/SET_SESSION_LIST', dataList);
                    this.dataList = dataList;

                    // 商家客服追加订单消息
                    this.addDataList();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 商家客服追加订单消息
         */
        addDataList () {
            if(this.userInfo.type === 2 && !this.isSelectSessionAll) {
                this.dataList.unshift({
                    chat_type: 'order',
                    msg_unread_num: '',
                    msg_time: new Date().getTime(),
                    user_info: {
                        head_img: '',
                        true_name: ''
                    },
                    latest_msg: {
                        msg_type: ''
                    }
                });
                setTimeout(() => {
                    this.isOrderMessage = this.userInfo.type === 2 ? true : false;
                }, 200);
            }
        },

        /**
         * @description 最近会话列表
         */
        getLatelyList (page) {
            this.$post('/Session/getRecentSessionList', {
                keyword: this.formData.chat_keyword,
                page_id: page || this.pageRecen.now_page
            }, resp => {
                if(resp.code == 1) {
                    this.$store.commit('global/SET_SESSION_LATELY_LIST', resp.data.list);
                    this.latelyList = resp.data.list;
                    this.$set(this.formData, 'sessionLength', resp.data.list.length);

                    if(!this.latelyList.length) return false;
                    this.unreadMessage = this.latelyList.reduce((totle,cur,index,arr)=>{
                        return Number(totle) + Number(cur.msg_unread_num);
                    },[]);

                    this.pageRecen = {
                        ...resp.data.page
                    };
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 获取星标列表
         */
        getMarkList () {
            this.$post('/Session/getStarSessionList', {}, resp => {
                if(resp.code == 1) {
                    this.markList = resp.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 获取留言列表
         */
        getLeavList () {
            this.$post('/Session/getNotServerSessionList', {}, resp => {
                if(resp.code == 1) {
                    this.leavList = resp.data.list;

                    if(!this.leavList.length) {
                        this.leaveMessage = 0;
                        return false;
                    }
                    this.leaveMessage = this.leavList.reduce((totle,cur)=>{
                        return Number(totle) + Number(cur.msg_unread_num);
                    },[]);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 留言刷新轮询
         */
        computedLeavList () {
            this.leaverTemp = setTimeout(() => {
                this.getLeavList();
                this.computedLeavList();
            },15000);
        },

        /**
         * @description 收到转接成功更新列表
         */
        updateList (val) {
            if(this.formData.currentTab == 0) {
                this.getSessionList();
            } else {
                this.getLatelyList();
            }

            if(val.session_no == this.session_no) { //在当前会话窗口
                this.$set(this.formData, 'currentTab', 1);
                this.$store.commit('global/SET_SESSION', '');
                this.$emit('startSession', '');
                this.getSessionStat();
            } else {
                return false;
            }

            // console.log('转接成功啦', val);
        },

        /**
         * @description 监听退出会话刷新列表,不在当前窗口
         */
        refreshData (row) {
            if(this.formData.currentTab == 0) {
                this.getSessionList();
            } else {
                this.getLatelyList();
            }
            this.getSessionStat();
        },

        /**
         * @description 监听退出会话刷新列表,在当前窗口
         */
        quitSessionList (row) {
            this.$set(this.formData, 'currentTab', 1);
            this.$store.commit('global/SET_SESSION', '');
            this.$emit('startSession', '');
            this.getSessionList();
            this.getLatelyList();
            this.getSessionStat();
            this.getLeavList();
        },

        /**
         * @description 切换会话
         */
        fnCurrentTab (current) {
            this.$set(this.formData, 'currentTab', current);
            this.$store.commit('global/SET_TAB',current);
            if(current == 0) {
                this.getSessionList();
            } else {
                this.getLatelyList();
            }
        },

        /**
         * @description 接收消息时 && 消息是此条会话
         */
        upDateSession (msg_id) {
            if((this.msgList[0].session_no == this.session_no) && this.msgList[0].session_no !== '' && this.session_no !== '') {
                this.$post('/Session/setMsgRead', {
                    msg_id: msg_id,
                    session_no: this.session_no
                }, resp => {
                    if(resp.code == 1) {
                        //
                    }
                });
            }
            this.getSessionList();
            this.getLatelyList();
            this.getMarkList();
            this.getLeavList();
        },

        /**
         * @description 搜索最近聊天记录或联系人
         */
        fnSearchKeyword (keyword) {
            this.formData.is_search = true;
            this.formData.currentTab = 1;
            this.getLatelyList();
        },

        /**
         * @description 取消搜索
         */
        fnClearSearch () {
            this.formData.chat_keyword = '';
            this.formData.is_search = false;
            this.formData.currentTab = 0;
            this.getLatelyList();
        },

        /**
         * @description 获取会话统计
         */
        getSessionStat () {
            this.$post('/Session/getSessionStat', {}, resp => {
                if(resp.code == 1) {
                    this.$store.commit('global/SET_SESSION_STAT', resp.data);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 继续接待
         */
        fnReception () {
            if(!this.formData.is_reception) {
                const message = this.formData.count_down + 's后可继续接待';

                this.$notify({
                    title: '提示',
                    message: message,
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            clearTimeout(this.formData.countDownTime);
            this.formData.is_reception = false;
            this.fnCountDown(this.formData.count_down);

            this.$post('/Session/applyAssignSession',{}, resp => {
                if(resp.code == 1) {
                    this.getSessionList();
                    this.$notify({
                        title: '提示',
                        message: '申请成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 倒计时处理
         */
        fnCountDown (count_down) {
            this.formData.countDownTime = setTimeout(() => {
                if (this.formData.count_down == 0) {
                    clearTimeout(this.formData.countDownTime);
                    this.formData.is_reception = true;
                    this.formData.count_down = 6;
                }
                this.formData.count_down--;
                this.fnCountDown(this.formData.count_down);
            },1000);
        },

        /**
         * @description 退出聊天
         */
        fnQuitChat (row) {
            this.$post('/Session/quitSession',{
                session_no: row.session_no
            }, resp => {
                if(resp.code == 1) {
                    if(row.session_no == this.session_no) {
                        this.$set(this.formData, 'currentTab', 1);
                        this.$store.commit('global/SET_SESSION', '');
                        this.$emit('startSession', '');
                    }
                    this.getSessionList();
                    this.getSessionStat();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 显示退出聊天入口
         */
        showQuit (row, type) {
            this.$set(row, 'flag', type);
        },

        /**
         * @description 开始会话
         */
        startSession (row, type = '') {
            if(!this.authList.includes('session')) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(!type) {
                this.$set(row, 'msg_unread_num', 0);
            }

            // 订单类型
            if(row.chat_type == 'order') {
                this.messageType = 'order';
                this.$emit('order', true);

                // 设置订单消息已读
                if(this.session_stat.order_session_count && this.orderList.length) {
                    const nos = this.orderList.reduce((cur,next) => {
                        cur.push(next.order_no);
                        return cur;
                    },[]);

                    this.$post('/Session/setOrderSessionRead',{
                        order_nos: nos.join()
                    }, resp => {
                        if(resp.code == 1) {
                            this.getSessionStat();
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });
                }
            } else {
                this.messageType = 'shop';
                this.$emit('order', false);
                this.$store.commit('global/SET_SESSION', row.session_no);
                this.$store.commit('global/SET_CHAT', row.chat_no);
                this.$store.commit('global/SET_TAB_LIST', row);
                this.$emit('startSession', row.session_no);
                this.socket(row);

                setTimeout(() => {
                    this.getLatelyList();//重新计算未读总数
                }, 300);

                if(this.formData.currentTab == 0) {
                    this.$store.commit('global/SET_SHOW', false);
                    setTimeout(()=>{
                        this.$store.commit('global/SET_SHOW', true);
                    },100);
                }
            }

            if(this.formData.currentTab === 3) {
                this.$store.commit('global/SET_MSG_TIME', true);
            } else {
                this.$store.commit('global/SET_MSG_TIME', false);
            }
        },

        /**
         * @description 历史状态重新发起会话
         */
        launch (row) {
            this.getTabList().then(resp => {
                this.dataList = resp;

                for(let i=0; i<resp.length; i++) {
                    if(resp[i].chat_no == row.chat_no) {
                        let object = resp[i];

                        this.$set(this.formData, 'currentTab', 0);
                        this.$store.commit('global/SET_SESSION', object.session_no);
                        this.$store.commit('global/SET_TAB_LIST', object);
                        this.$store.commit('global/SET_SHOW', true);
                        this.$emit('startSession', object.session_no);
                        this.socket(object);
                        this.$emit('start', object);
                    }
                }
            });
        },

        /**
         * @description 订单中联系买家
         */
        orderLauch (row) {
            // 查询是否在当前绘画列表中
            // const chat_nos = this.dataList.reduce((cur,next) => {
            //     cur.push(next.chat_no);
            //     return cur;
            // },[]);

            // console.log('row', row);

            // if(chat_nos.includes(row.chat_no)) { //在当前会话列表中
            //     console.log('11');
            // } else { //不在当前会话列表
            //     console.log('22');
            // }
            this.$post('/Session/startSession',{
                session_no: row.session_no
            }, resp => {
                if(resp.code == 1) {
                    this.$store.commit('global/SET_CHAT', resp.data.chat_no);
                    this.$emit('connect', row);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 获取最新数据
         */
        getTabList () {
            return new Promise((resolve, reject) => {
                this.$post('/Session/getSessionList', {}, resp => {
                    if(resp.code == 1) {
                        resolve(this.sortList(resp.data.list), this.sortIndex);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },

        /**
         * @description 排序处理
         * @param {Number} type 排序类型 0:消息由近到远排序 1:等待时间由长到短
         */
        sortList (list = [], type = 0) {
            if(!list.length) return [];

            let dataList = [];

            if(type == 0) {
                dataList = list.sort((a,b) => {
                    return b.msg_time - a.msg_time;
                });
            }

            if(type == 1) {
                dataList = list.sort((a,b) => {
                    return a.student_wait_start_time - b.student_wait_start_time;
                });
            }

            return dataList;
        },

        /**
         * @description 建立新连接，开始会话
         */
        socket (row) {
            if(this.formData.currentTab) return false;// 仅会话中发起连接
            this.$post('/Socket/getSocket', {}, resp => {
                if(resp.code == 1) {
                    if(this.socketObj !== '') {
                        this.socketNet(false, resp, row);
                    } else {
                        this.socketNet(true, resp, row);
                    }
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 会话连接
         */
        socketNet (param, resp, row) {
            if(!param) {
                this.$store.commit('connect/CLOSE_SOCKET_CONNECT');
            }
            this.$store.commit('connect/INIT_CONNECT_SOCKET', {
                socketUrl: resp.data.socket_url,
                chat_no: row.chat_no,
                session_no: row.session_no
            });
        },

        /**
         * @description 查看转接列表
         */
        openTransfer () {
            this.getTableData(1);
            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * @description 获取转接数据列表
         */
        getTableData (page) {
            this.$post('/Transfer/getTransferList', {
                page_id: page || this.page.now_page
            }, resp => {
                if (resp.code == 1) {
                    this.transList = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 查看转接原因
         */
        checkReson (row) {
            this.transferReson = row.transfer_reason;
            this.dialogVisibleReson = !this.dialogVisibleReson;
        },

        /**
         * @description 拒绝接入
         */
        rejectTransfer (row) {
            // this.$prompt('请输入拒绝转接理由', '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     inputPattern: /\S/,
            //     inputErrorMessage: '内容不可以为空'
            // }).then(({ value }) => {

            // });
            this.$post('/Transfer/rejectTransfer',{
                session_no: row.session_no
            }, resp => {
                if(resp.code == 1) {
                    this.dialogVisible = !this.dialogVisible;
                    this.getTableData();
                    this.getSessionStat();
                    this.$notify({
                        title: '提示',
                        message: '拒绝成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 全部拒绝
         */
        rejectTransferAll () {
            if(!this.transList.length) {
                this.$notify({
                    title: '提示',
                    message: '暂无可拒绝的客服',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$prompt('请输入拒绝转接理由', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputErrorMessage: '内容不可以为空'
            }).then(({ value }) => {
                this.$post('/Transfer/rejectTransferAll',{
                    reject_reason: value
                }, resp => {
                    if(resp.code == 1) {
                        this.dialogVisible = !this.dialogVisible;
                        this.getTableData();
                        this.getSessionStat();
                        this.$notify({
                            title: '提示',
                            message: '拒绝成功',
                            type: 'success',
                            duration: 2000
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },

        /**
         * @description 同意接入
         */
        acceptTransfer (row) {
            this.$post('/Transfer/acceptTransfer',{
                session_no: row.session_no
            }, resp => {
                if(resp.code == 1) {
                    this.dialogVisible = !this.dialogVisible;
                    this.getTableData();
                    this.getSessionStat();
                    if(this.formData.currentTab == 0) {
                        this.getSessionList();
                    } else {
                        this.getLatelyList();
                    }
                    this.$notify({
                        title: '提示',
                        message: '接入成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 接受全部转接
         */
        acceptTransferAll () {
            if(!this.transList.length) {
                this.$notify({
                    title: '提示',
                    message: '暂无可接入的客服',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$post('/Transfer/acceptTransferAll',{}, resp => {
                if(resp.code == 1) {
                    this.dialogVisible = !this.dialogVisible;
                    this.getTableData();
                    this.getSessionStat();
                    if(this.formData.currentTab == 0) {
                        this.getSessionList();
                    } else {
                        this.getLatelyList();
                    }
                    this.$notify({
                        title: '提示',
                        message: '接入成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 星标处理
         */
        handleChangeMarker (row) {
            if(row.star_status) {
                this.$set(row, 'star_status', 0);
            } else {
                this.$set(row, 'star_status', 1);
            }

            this.$post('Session/setStar',{
                session_no: row.session_no,
                star: row.star_status
            }, resp => {
                if(resp.code == 1) {
                    this.getSessionList();
                    this.getLatelyList();
                    this.getMarkList();
                    this.getLeavList();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 排序处理
         */
        handleSortData (index) {
            this.sortIndex = index;
            this.showSortDialog = false;

            this.getSessionList();
        },

        /**
         * @description 阻止默认事件
         */
        stop (event) {
            event.stopPropagation();
        },

        /**
         * @description 选择当前会话
         */
        handleChangeSession (event, option) {
            event.stopPropagation();

            const checkSelectAll = list => {
                let change = false;

                if(!list.length) return false;

                for(let i=0; i<list.length; i++) {
                    if(!list[i]['is_change']) {
                        change = true;
                    }
                }

                return change;
            };

            this.$set(option, 'is_change', !option.is_change);

            this.isSelectAll = checkSelectAll(this.dataList) ? false : true;
        },

        /**
         * @description 全选/反选
         */
        handleSelect () {
            if(!this.isSelectAll) { //全选
                for(let key=0; key<this.dataList.length;key++) {
                    this.$set(this.dataList[key], 'is_change', true);
                }
            } else { //反选
                for(let key=0; key<this.dataList.length;key++) {
                    this.$set(this.dataList[key], 'is_change', false);
                }
            }
            this.isSelectAll = !this.isSelectAll;
        },

        /**
         * @description 批量退出
         */
        handleBatchQuit () {
            const nos = this.dataList.reduce((cur,next) => {
                if(!!next.is_change) {
                    cur.push(next.session_no);
                }
                return cur;
            }, []);

            if(!nos.length) {
                this.$notify({
                    title: '提示',
                    message: '请先勾选要退出接待的会话',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$post('/Session/quitSession',{
                session_no: nos.join()
            }, resp => {
                if(resp.code == 1) {
                    if(nos.includes(this.session_no)) {
                        this.$set(this.formData, 'currentTab', 1);
                        this.$store.commit('global/SET_SESSION', '');
                        this.$emit('startSession', '');
                    }
                    this.getSessionList();
                    this.getSessionStat();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.wrap {
    width: 360px;
    height: 100%;
    // overflow: hidden;
    background: #ffffff;
    margin-right: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}
//搜索框
.search {
    width: 336px;
    margin: 24px 0 15px 12px;
    position: relative;
    .wrap-search {
        width: 336px;
        cursor: pointer;
    }
    .search-close {
        width: 30px;
        height: 36px;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }
}

//tab
.tab {
    width: 100%;
    height: 46px;
    display: flex;
    position: relative;
    padding-bottom: 5px;
    cursor: pointer;
    box-sizing: border-box;
    border-bottom: 1px #F0F2F7 solid;
    &-title {
        width: 96px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        color: rgba(0,0,0,.7);
        font-size: 14px;
    }
    .tab-active {
        color: #20A0FF;
        font-weight: 500;
    }
    .tab-line {
        height: 3px;
        background: #20A0FF;
        transition: all .2s;
        position: absolute;
        bottom: 5px;
    }
    .tab_no_remid {
        // height: 20px;
        // border-radius: 50%;
        // background: #EC2D2D;
        // line-height: 18px;
        // text-align: center;
        color: #ffffff;
        font-size: 12px;
        position: absolute;
        top: 0px;
        left: 62px;
    }
    .current-num, .current-num2, .current-num3 {
        background: #F95B56;
        color: #ffffff;
        width: 18px;
        height: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        border-radius: 50%;
    }
    .current-num2 {
        width: 30px;
        height: 18px;
        border-radius: 25px;
    }
    .current-num3 {
        width: 21px;
        height: 21px;
    }
}

//聊天记录数量
.chat_record_length {
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
    box-sizing: border-box;
    padding-left: 16px;
    background: #F8FAFF;
}

//接待
.reception {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px;
    background: #F8FAFF;
    .reception-wrap {
        height: 46px;
        display: flex;
        align-items: center;
        .reception-wrap-text {
            color: rgba(0, 0, 0, 0.75);
            font-size: 14px;
            white-space: nowrap;
        }
        .zsdxtishiwenhao {
            color: rgba(123,124,127,1);
            font-size: 14px;
            margin-left: 4px;
            cursor: pointer;
        }
    }
    .reception-line-up {
        color: rgba(0, 0, 0, 0.75);
        font-size: 14px;
        margin-left: 24px;
        white-space: nowrap;
    }
}

// 会话操作
.conversation {
    width: 100%;
    height: 38px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    .conver_left {
        display: flex;
        align-items: center;
        .zsdxxiangxia {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.75);
            margin-right: 4px;
        }
        .conver_number {
            color: rgba(0, 0, 0, 0.75);
            font-size: 14px;
        }
        .zsdxfanhui {
            color: rgba(0, 0, 0, 0.75);
            font-size: 14px;
            cursor: pointer;
            margin-right: 19px;
            &:hover {
                color: rgba(32, 160, 255, 1);
            }
        }
        .conver_all {
            color: rgba(0, 0, 0, 0.75);
            font-size: 14px;
            font-weight: 500;
        }
    }
    .conver_cancel {
        color: rgba(32, 160, 255, 1);
        font-size: 14px;
        cursor: pointer;
    }
    .conver_right {
        display: flex;
        align-items: center;
        .zsdxpaixu {
            color: rgba(121,121,121,1);
            font-size: 14px;
            cursor: pointer;
            margin-right: 12px;
            &:hover {
                color: rgba(32, 160, 255, 1);
            }
        }
        .zsdxpiliang {
            color: rgba(121,121,121,1);
            font-size: 14px;
            cursor: pointer;
            &:hover {
                color: rgba(32, 160, 255, 1);
            }
        }
    }
}

//接待通知
.notice {
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
}

//消息列表
.message {
    width: 360px;
    flex: 1;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .message-box {
        width: 1440px;
        height: 100%;
        display: flex;
        transition: all .3s;
        .current, .lately, .marker {
            width: 360px;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            // border: 1px red solid;
            cursor: pointer;
            &::-webkit-scrollbar {
                width: 3px;
                border-radius: 4px;
            }
            //消息
            .current-list {
               width: 100%;
               height: 74px;
               overflow: hidden;
               position: relative;
               display: flex;
               box-sizing: border-box;
               padding: 12px 15px;
               &:hover {
                   background: rgba(249, 249, 249, 1);
               }
                .current_items {
                    width: 26px;
                    display: flex;
                    align-items: center;
                    .zsdxcheck_def {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.5);
                        cursor: pointer;
                    }
                    .zsdxcheck_sel {
                        font-size: 14px;
                        color: rgba(32, 160, 255, 1);
                        cursor: pointer;
                    }
                }
                .current-quit {
                    width: 24px;
                    height: 24px;
                    border-radius: 3px;
                    background: #F9F9F9;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 6px;
                    right: 6px;
                    z-index: 1;
                    &>i{
                        cursor: pointer;
                        color: rgba(166,166,166,1);
                        font-weight: 500;
                    }
                }
                .current-num, .current-num2, .current-num3 {
                    background: #F95B56;
                    color: #ffffff;
                    width: 18px;
                    height: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    position: absolute;
                    border-radius: 50%;
                    top: 4px;
                    left: 47px;
                }
                .current-num2 {
                    width: 30px;
                    height: 18px;
                    border-radius: 25px;
                }
                .current-num3 {
                    width: 21px;
                    height: 21px;
                }
                &::after {
                    content: '';
                    position: absolute;
                    width: 348px;
                    height: 1px;
                    background: #F0F2F5;
                    right: 0;
                    bottom: 0;
                }
                .current-list-image {
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    margin-right: 12px;
                }
                .current-user {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    .current-user-name {
                        width: 140px;
                        height: 20px;
                        line-height: 20px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #000000;
                        font-size: 14px;
                        font-weight: 500;
                        margin-bottom: 7px;
                    }
                    .current-content {
                        // width: 208px;
                        height: 18px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .current-message {
                            width: 108px;
                            height: 18px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            color: rgba(0, 0, 0, 0.5);
                            font-size: 12px;
                            line-height: 18px;
                        }
                        .current-date {
                            height: 18px;
                            line-height: 18px;
                            color: rgba(0, 0, 0, 0.5);
                            font-size: 12px;
                        }
                    }
                }
                .tab_no_remid {
                    // height: 20px;
                    // border-radius: 50%;
                    // background: #EC2D2D;
                    // line-height: 18px;
                    // text-align: center;
                    color: #ffffff;
                    font-size: 12px;
                    position: absolute;
                    top: 0px;
                    left: 42px;
                }
                .current-num, .current-num2, .current-num3 {
                    background: #F95B56;
                    color: #ffffff;
                    width: 18px;
                    height: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    position: absolute;
                    border-radius: 50%;
                    top: 4px;
                    left: 47px;
                }
                .current-num2 {
                    width: 30px;
                    height: 18px;
                    border-radius: 25px;
                }
                .current-num3 {
                    width: 21px;
                    height: 21px;
                }
                // 星标
                .zsdx5jiaoxing {
                    font-size: 16px;
                    color: rgba(214,214,214,1);
                    position: absolute;
                    left: 4px;
                    top: 4px;
                    cursor: pointer;
                    display: none;
                }
                &:hover .zsdx5jiaoxing {
                    display: block;
                }
            }
        }
        .lately {
            width: 360px;
            height: 100%;
        }
        .__none_data {
            color: rgba(0, 0, 0, 0.5);
            font-size: 14px;
            width: 360px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

//待转接信息
.wait {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #20A0FF;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    border-top: 1px #F0F2F5 solid;
    .wait-length {
        width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 50%;
        color: #ffffff;
        background: #EC2D2D;
        font-size: 12px;
        margin-left: 9px;
        text-align: center;
    }
}

//全选操作
.selectAll {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #20A0FF;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    border-top: 1px #F0F2F5 solid;
    padding: 0 12px;
    .__select_left {
        display: flex;
        align-items: center;
        .zsdxcheck_def {
            font-size: 14px;
            cursor: pointer;
            color: rgba(0, 0, 0, 0.5);
        }
        .zsdxcheck_sel {
            font-size: 14px;
            cursor: pointer;
            color: rgba(32, 160, 255, 1);
        }
        .__select_text {
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            margin-left: 12px;
            margin-right: 4px;
        }
        .__select_content {
            color: rgba(153, 153, 153, 1);
            display: flex;
            align-items: center;
            font-size: 12px;
            span {
                color: rgba(236, 45, 45, 1);
            }
        }
    }
    .__select_button {
        width: 104px;
        height: 28px;
        background: rgba(32, 160, 255, 1);
        border-radius: 14px;
        text-align: center;
        line-height: 28px;
        color: #ffffff;
        font-weight: 500;
        cursor: pointer;
        font-size: 14px;
    }
}

//排序
.sortList {
    width: 192px;
    height: 100px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    position: absolute;
    left: 219px;
    top: 205px;
    z-index: 99;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0 15px;
    .sort_items {
        width: 162px;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        .sort_title {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            margin-right: 10px;
        }
        .sort_logo {
            width: 20px;
            height: 20px;
        }
        &:hover .sort_title{
            color: rgba(32, 160, 255, 1);
        }
    }
    .sort_items:first-child {
        border-bottom: 1px rgba(240, 242, 247, 1) solid;
    }
}

//转接弹窗
.transfer {
    .info {
        display: flex;
        .head_img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .info-wrap {
            display: flex;
            flex-direction: column;
            .info-name {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.8);
                font-weight: 500;
                height: 20px;
                line-height: 20px;
                margin-bottom: 6px;
            }
            .info-kf {
                font-size: 12px;
                height: 18px;
                line-height: 18px;
                color: rgba(0, 0, 0, 0.5);
            }
        }
    }
    .button {
        display: flex;
        align-items: center;
    }
    .button-reson {
        width: 68px;
        height: 26px;
        border-radius: 4px;
        border: 1px solid #D7D7D7;
        margin-right: 16px;
        font-size: 12px;
        color: #333;
        text-align: center;
        line-height: 26px;
        cursor: pointer;
    }
    .button-agreen {
        width: 68px;
        height: 26px;
        border-radius: 4px;
        border: 1px solid #20A0FF;
        text-align: center;
        line-height: 26px;
        color: #20A0FF;
        font-size: 12px;
        cursor: pointer;
    }
    .dialog-footer {
        height: 32px;
        display: flex;
        justify-content: center;
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 20px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
    .reson {
        width: 532px;
        background: #FBFBFB;
        border: 1px #EEEEEE solid;
        color: #333333;
        font-size: 14px;
        line-height: 22px;
        box-sizing: border-box;
        padding: 24px;
    }
}

</style>

<style lang="less">
.wrap {
    .wrap-search {
        .el-input__inner{
            background: #F0F2F7;
            color: rgba(0, 0, 0, 0.8);
            border: none;
            &::-webkit-input-placeholder {
                color: rgba(0, 0, 0, 0.5);
            }
        }
        .el-input__icon {
            color: rgba(0, 0, 0, 0.5);
        }
        .el-icon-close {
            color: rgba(98,105,113,1);
            font-size: 15px;
            font-weight: bold;
        }
    }
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .transfer .el-table__body-wrapper {
        height: auto !important;
        max-height: 500px;
    }
}
.reception-poper {
    color: #666666;
    font-size: 12px;
    line-height: 20px;
}
</style>